feat: Textarea 컴포넌트 구현 #150
Conversation
There was a problem hiding this comment.
스크롤이 생겼을 때 디자인이 아직 적용 전인거 같네요!
| 스토리북 | 피그마 |
|---|---|
 |
 |
There was a problem hiding this comment.
스타일 적용해서 반영해두겠습니당! 근데 제가 맥인데 보리가 윈도우 스타일 잘 적용됐는지 추후 수정되면 한번 확인해주심.. 감사하겠숨다😉
There was a problem hiding this comment.
@nijuy 스크롤바 적용 완료하였습니다! 이게 스크롤바 적용이 패딩값을 무시하고 textarea 전체에 맞게 스크롤바가 생겨서 StyledTextareaWrapper로 감싸서 패딩값 적용된 컨테이너 안에 스크롤바가 생긴 형태(피그마와 같은 형태)로 작업하였습니다!
윈도우 환경 확인 부탁드려욥!
There was a problem hiding this comment.
잘 보입니다!
다만 첫번째 사진은 단어 길이 때문에 줄바꿈이 생겨서 스크롤과 단어 사이 여백이 충분한데,
그렇지 않은 경우에 글자랑 스크롤바 사이가 너무 딱 붙어있어서..🥲
디자인 자체가 1로 되어있어서 줄바꿈이 안 일어나는 경우 글자와 스크롤 사이 여백이 고려됐는지 잘 모르겠네요!
한번 물어보는 건 어떨까요??
There was a problem hiding this comment.
6px이라네용 굿.........
바로 머지할 수 있게 미리 어푸룹 해둘게요 이거 말곤 진짜진짜 안보임!!!!
| placeholder?: string; | ||
| disabled?: boolean; | ||
| error?: boolean; | ||
| value?: string; |
There was a problem hiding this comment.
value의 역할이 궁금합니다!
외부에서 value prop을 넘겨주면 사용자가 값을 변경해도 prop으로 넘긴 value로 값이 고정되어 버리니까 입력값이 화면에 반영이 안돼요 (˘･_･˘)
There was a problem hiding this comment.
음 사실 value를 prop으로 정한 이유가 사용자가 value를 자신이 정한 value 값을 prop으로 넣어서 사용할 수 있도록 하려는 의도 였습니다!!
생각해보니 내부에서 제어(usestate)를 하게 되니 적용이 되지 않겠네요..
음 value와 onChage를 외부에서 prop으로 제어하도록 하는게 맞는 방법인지, 내부에서 상태 관리를 하는게 맞는 방법인지 고민고민,,, 입니당....
There was a problem hiding this comment.
생각해보니 내부에서 제어(usestate)를 하게 되니 적용이 되지 않겠네요..
사실 제가 입력값이 화면에 반영이 안돼요 라고 표현했던 경우는 사용처에서 잘못 사용한 거긴 해요.
(onValueChange를 넘기지 않고 value만 설정했음)
value: A string. Controls the text inside the text area.When you pass value, you must also pass an onChange handler () that updates the passed value. - https://react.dev/reference/react-dom/components/textarea
value prop을 전달할 거면 onValueChange도 같이 주거나 readOnly로 설정하는 게 올바른 사용이고,
그렇게 하지 않았을 때 리액트에서 사진과 같은 콘솔 경고를 띄워주는데
지금 Textarea에는 onChange={handleChange}가 있으니까 value만 넘겨도 경고가 안 뜨는 점이 좀 걸렸어요 저는!
(어쨌든 onValueChange가 없어서 문제가 발생해도 경고가 뜨지 않으니 잘못된 사용을 단번에 알아차리기 어렵다고 생각)
지금처럼 value prop을 전달할 수 있게 갈 거라면 적절한 예외 처리 + 문서 수정이 필요하다고 생각합니다 @.@
There was a problem hiding this comment.
사용하는 입장에서 가장 편한 방식은
- 내부에서 상태 관리
- 외부(사용하는곳)에서는
onValueChange이벤트를 사용해서 내부 value를 받아올 수 있도록
하는거라고 생각해요
이 방법을 사용하는 가장 대표적인 라이브러리가 react-hook-form 이긴하져
There was a problem hiding this comment.
value prop 삭제하는 방안 으로 갔습니다!
- 내부에서 상태 관리
- 외부(사용하는곳)에서는
onValueChange이벤트를 사용해서 내부 value를 받아올 수 있도록
이 방식으로 수정했습니다 확인 부탁드려욥!
(plaholder, disabled, maxLength)
There was a problem hiding this comment.
굿임니다!! 👍
<StyledHelperText $error={error}>
{helperText && helperText} {maxLength && `(${currentLength}/${maxLength})`}
</StyledHelperText>논의한 방식은 위 로직보다는 아래 로직쪽에 가깝긴해요
<StyledHelperText $error={error}>
{maxLength ? `(${currentLength}/${maxLength})` : helperText && helperText}
</StyledHelperText>
1️⃣ 어떤 작업을 했나요? (Summary)
2024-08-21.5.30.09.mov
2️⃣ 알아두시면 좋아요!
최대 글자 수를 설정했을 때 helperText 부분을
사용자가 넣고 싶은 문구 옆에 (현재 글자 수 / 최대 글자 수) 텍스트로 넣어두었습니다.사용자가 helperText 문구를 따로 넣지 않고 최대 글자 수를 설정하면 (현재 글자 수 / 최대 글자 수)만 나오는 상태로 자유롭게 설정을 해두었습니다.
@fecapark 이 구현하신 textField와 맞춰서 추후 수정 작업하겠습니다! 확인해주시고 의견 주시면 감사하겠습니다ㅎㅎ
+++
문서 작업이나 디자인 시스템 작업이 처음이라 "이렇게 문서 작성하면 좋을 것 같다.", "코드 작성할 때는 이런 걸 고려하면서 작성해야 한다" 등 마음껏 알려주시면 제가 열심히 깊이 새겨들으며 차차 성장해나갈 수 있도록 하겠습니다👊🏻🔥
3️⃣ 추후 작업
리뷰 반영하기
째깍째깍 작업하기..
4️⃣ 체크리스트 (Checklist)
main브랜치의 최신 코드를pull받았나요?